<template>
  <el-card v-loading="loading" shadow="hover" style="height: 100%; position: relative">
    <div slot="header" style="text-align: center; font-size: 20px;font-weight: bolder;color: #666; padding: 10px">
      <span>导出工序月份统计报表</span>
    </div>
    <el-form
      ref="crForm"
      :model="form"
      :rules="rules"
      label-width="80px"
      :validate-on-rule-change="false"
    >
      <el-form-item label="导出月份" prop="month">
        <el-date-picker
          v-model="form.month"
          type="month"
          placeholder="选择月"
          value-format="yyyy-MM"
        />
      </el-form-item>
      <el-form-item label="包含旧工序" prop="dateRange">
        <el-radio-group v-model="form.containOld">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <div style="text-align: center;width: calc(100% - 40px); position: absolute; bottom: 30px">
        <el-button type="primary" @click="exportHandler">导出</el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script>
import { downloadProcessMonthStatistics } from '@/api/statement/exportFile'
export default {
  name: 'ProcessMonthStatistics',
  components: {
  },
  props: {
    projects: { type: Array, default: () => [] }
  },
  data() {
    return {
      form: {
        month: '',
        containOld: false
      },
      rules: {
        month: [
          { required: true, message: '请选择月份' }
        ]
      },
      loading: false
    }
  },
  computed: {
  },
  methods: {

    /**
     * 导出
     */
    exportHandler() {
      this.$refs.crForm.validate((valid) => {
        if (valid) {
          this.loading = true
          const params = { ...this.form }
          const month = params.month
          downloadProcessMonthStatistics(params).then(file => {
            const arr = month.split('-')
            const maxDay = new Date(arr[0], arr[1], 0).getDate()
            const elink = document.createElement('a')
            const blob = new Blob([file])
            elink.download = `${parseInt(arr[1])}月工序完成情况统计_截止${maxDay}日.xlsx`
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            // 释放URL 对象
            URL.revokeObjectURL(elink.href)
            document.body.removeChild(elink)
          }).catch(msg => {
            this.$message.error(msg)
          }).finally(() => {
            this.form.month = ''
            this.loading = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
